<!-- 

4. Задача

Теперь осталось закрепить всё пройденное на практическом примере. Как и в том примере это будет небольшая карта, только не из какой-то существовавшей игры, а придуманной нами. 
Для того что бы он нормально работал нам необходимо будет создать в любом графическом редакторе изображение составленное из фрагментов которые нам будут нужны что бы нарисовать дорожку, домик и полянку. 
Вообще фрагменты карты называются тайлами, а файл в котором они все собраны в одно изображение называется тайлсетом. Вот это изображение я нарисовал собственноручно в программе Pinta под Ubuntu 
и вам настоятельно не рекомендую повторять мои грехи.
Итак, размерность будет 8 на 8 квадратных блоков шириной 32 пиксела. На карте нам необходимо будет изобразить домик и дорожку. Элементы домика нарисованы ручками, можно сказать каждый кирпичик. 
Траву и песок делалось путём заливки облости соответствующим цветом и добавки шума. Всё конечно представленно очень примитивно, но показательно.
Рассмотрим с пинцетом такой кусок кода как var map = [[{x:1, y: 4}…  значения x и y указывают какой элемент из картинки брать. Т.е. если исходный рисунок разбить на квадрат 32×32 то станет понятней.
И форэкзампл: 

-->

<html>

<META charset='UTF8'>

<head>

  <title>imgExample</title>

</head>

<body>

  <canvas id='example'>Обновите браузер</canvas>

  <script>

    var example = document.getElementById("example");

    // Задаём контекст

    var ctx = example.getContext('2d');  // Контекст холста

    // Размер одной ячейки на карте

    cellSize = 32;

   // Размер канваса равный 8х8 клеток

    example.width = 8*cellSize;

    example.height = 8*cellSize;

    // Карта уровня двумерным массивом

    // Первая и вторая координата задаёт клетку в исходном изображении

    var map = 

      [

        [{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}],  // 1ый ряд карты

        [{x:1, y: 4}, {x:1, y: 1}, {x:2, y: 1}, {x:3, y: 1}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}],  // 2ый ряд карты

        [{x:1, y: 4}, {x:1, y: 2}, {x:2, y: 2}, {x:3, y: 2}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}],  // 3ый ряд карты

        [{x:1, y: 4}, {x:3, y: 4}, {x:2, y: 3}, {x:3, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}],  // 4ый ряд карты

        [{x:1, y: 4}, {x:3, y: 4}, {x:2, y: 4}, {x:3, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}],  // 5ый ряд карты

        [{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}],  // 6ый ряд карты

        [{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 3}, {x:1, y: 4}, {x:1, y: 4}],  // 7ый ряд карты

        [{x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}, {x:1, y: 4}]   // 8ый ряд карты

      ];

                

    var pic = new Image();  // "Создаём" изображение

    pic.src = 'http://dl.dropbox.com/u/8307275/p/set.png';  // Источникнашего тайлсэта

    pic.onload = function() {  // Событие onLoad, ждём момента пока загрузится изображение

      for (var j=0; j<8; j++) 

        for (var i=0; i<8; i++) 

          // перебираем все значения массива 'карта' и в зависимости от координат вырисовываем нужный нам фрагмент

          ctx.drawImage(pic, (map[i][j].x-1)*cellSize, (map[i][j].y-1)*cellSize, 32, 32, j*cellSize, i*cellSize, 32, 32);  // Рисуем изображение от точки с координатами 0, 0

    }

  </script>

</body>

</html>